<template>
	<div>
		<div class="food">
			<div style="display: flex;flex-wrap: wrap;">
				<div v-for="item in datas" :key='item.id' class="food1" style="margin-top: 0.3rem;padding: 3%;box-sizing: border-box;width: 25%;">
					<div class="pp">
						<img :src="'https://fuss10.elemecdn.com'+item.image_url" style="width: 3rem;">
						<p>{{item.title}}</p>
					</div>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'food',
		data:function() {
			return{
				datas:[],
			}
		},
		created:function(){
			window.console.log(this);
			let obj=this;
			//axios 完成数据的get网络请求
			this.$axios({
				url:'https://elm.cangdu.org/v2/index_entry',
				method:'GET'
			}).then(function(res){
				window.console.log(res);
				obj.datas = res.data;
				
			}).catch(function(err){
				alert(err);
			})
		}
	}
</script>

<style scoped>
	html,body{
		width: 100%;
		height: 100%;
	}
	.food{
		text-align: center;
		margin-top: 2.55rem;
		background: #FFFFFF;
	}
	
</style>
